<template>
  <div class="pageWrap">
    <div class="proWrap">
      <div class="inputWrap">
        <h2 class="title">
          <strong>
            输入：
          </strong>
          <a-space>
            <a-button type="primary" ghost danger size="small" @click="handleClear('input')">清空输入框</a-button>
            <a-button type="primary" ghost size="small" @click="handleCopy('input')">复制</a-button>
          </a-space>
        </h2>
        <a-textarea v-model:value="data.inputValue" :rows="20" placeholder="请输入或者粘贴需要处理的文本" />
      </div>
      <div class="hWrap">
        <LeftOutlined @click="handleLeft"></LeftOutlined>
        <!-- <RightOutlined></RightOutlined> -->
      </div>
      <div class="outputWrap">
        <h2 class="title">
          <strong>
            输出：
          </strong>
          <a-button type="primary" size="small" @click="handleCopy('output')">复制</a-button>
        </h2>
        <a-textarea v-model:value="data.outputValue" :rows="20" placeholder="处理结果" />
      </div>
    </div>
    <div class="btnWrap">
      <a-button type="primary" ghost @click="handleProcess('numberToChinese')">数字转中文</a-button>
      <a-button type="primary" ghost @click="handleProcess('numberToChineseCapital')">数字转中文大写</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('numberToEnglish')">数字转英文</a-button>
      <a-button type="primary" ghost @click="handleProcess('englishToNumber')">英文转数字</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('decimalToRoman')">十进制转罗马数字</a-button>
      <a-button type="primary" ghost @click="handleProcess('romanToDecimal')">罗马数字转十进制</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('binaryToDecimal')">二进制转十进制</a-button>
      <a-button type="primary" ghost @click="handleProcess('binaryToHex')">二进制转十六进制</a-button>
    </div>
    <div class="descWrap">
      <h3>简介</h3>
      <p>
        在线免费的数字转换工具，支持数组转中文、数组转中文大写、数组转英文、数字转罗马数字、二进制转十六进制。纯在线工具，不上传服务器浏览器本地处理
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  numberToChinese,
  numberToChineseCapital,
  numberToEnglish,
  englishToNumber,
  decimalToRoman,
  romanToDecimal,
  binaryToDecimal,
  binaryToHex
} from '../../service/index.js'

import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const data = reactive({
  inputValue: '',
  outputValue: ''
})

const handleProcess = (type) => {
  if (data.inputValue === '') {
    message.warning('-。- 、呃呃，貌似没有输入呢~')
    return
  }
  try {
    switch (type) {
      case 'numberToChinese':
        data.outputValue = numberToChinese(data.inputValue)
        break
      case 'numberToChineseCapital':
        data.outputValue = numberToChineseCapital(data.inputValue)
        break
      case 'numberToEnglish':
        data.outputValue = numberToEnglish(data.inputValue)
        break
      case 'englishToNumber':
        data.outputValue = englishToNumber(data.inputValue)
        break
      case 'decimalToRoman':
        data.outputValue = decimalToRoman(data.inputValue*1)
        break
      case 'romanToDecimal':
        data.outputValue = romanToDecimal(data.inputValue)
        break
      case 'binaryToDecimal':
        data.outputValue = binaryToDecimal(data.inputValue)
        break
      case 'binaryToHex':
        data.outputValue = binaryToHex(data.inputValue)
        break
    }
  } catch (error) {
    message.warning(error)
  }
}

// 将输出值转移到输入值
const handleLeft = () => {
  data.inputValue = data.outputValue
  data.outputValue = ''
}

// 复制
const handleCopy = async (type) => {
  try {
    let textToCopy = ''
    if (type === 'input') {
      if (data.inputValue === '') {
        message.warning('-。- 、呃呃，貌似没有输入呢~')
        return
      }
      textToCopy = data.inputValue
    } else if (type === 'output') {
      if (data.outputValue === '') {
        message.warning('-。- 、呃呃，貌似没有处理结果呢~')
        return
      }
      textToCopy = data.outputValue
    }
    await navigator.clipboard.writeText(textToCopy)
    message.success(`文本已复制到剪贴板`)
  } catch (error) {
    message.error(`复制到剪贴板失败：${error}`)
  }
}

// 清空
const handleClear = () => {
  data.inputValue = ''
  data.outputValue = ''
}

</script>

<style lang="scss" scoped>
.pageWrap{
  .proWrap{
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    .inputWrap,
    .outputWrap{
      flex: 1;
      .title{
        display: flex;
        strong{
          flex: 1;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .hWrap{
      display: flex;
      flex-direction: column;
      width: 24px;
      padding-top: 220px;
      .anticon{
        display: block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #1890ff;
        margin-bottom: 12px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .btnWrap{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .descWrap{
    margin-top: 16px;
    h3{
      font-size: 14px;
      font-weight: bold;
    }
    p{
      font-size: 14px;
      color: #666;
      line-height: 1.6em;
      text-indent: 2em;
    }
  }
}
</style>